<template>
  <div>
    <div
      style="border: 2px solid skyblue;margin: 20px auto;width:20%;text-align:center;font-size:40px;background:skyblue"
    >学生管理</div>
    <div class="content" style="display:flex;flex-direction:column">
      <div style="margin:10px auto;">
        <div style="display:flex;flex-direction:row">
          <el-input
            type="text"
            style="width:300px;height:40px"
            placeholder="输入搜索内容"
            v-model="params.queryParams"
            @change="getStudentAllGrade"
            autofocus
            clearable
          ></el-input>
          <div
            style="font-weigth:bold;font-size:23px;margin-left:20px;background-color:skyblue;border:1px solid black;border-radius:10%;width:50px;heigth:25px"
            @click="getStudentAllGrade"
          >搜索</div>
        </div>
      </div>
      <div style="margin:10px">
        <el-button
          type="text"
          @click="centerDialogVisible = true"
          style="color:black;border:1px solid black;width:100px;background:skyblue;font-size:15px;float:right;"
        >添加</el-button>
        <el-dialog title="所有项为必填项" :visible.sync="centerDialogVisible" width="40%" center>
          <span style="margin-left:150px;display:flex;flex-direction:column;">
            <span>
              学号:
              <input v-model="addInfo.code" id="addInp1" type="number"/>
              <br />
              <br />
            </span>
            <span>
              班级:
              <input v-model="addInfo.grade" id="addInp2" type="text"/>
              <br />
              <br />
            </span>
            <span>
              姓名:
              <input v-model="addInfo.name" id="addInp3" type="text"/>
              <br />
              <br />
            </span>
            <span>
              身份:
              <!-- <input v-model="addInfo.identity" id="addInp9" /> -->
              <el-radio v-model="addInfo.identity" label="学生" >学生</el-radio>
                    <el-radio v-model="addInfo.identity" label="教师" >教师</el-radio>
              <br />
              <br />
            </span>
            <span>
              math:
              <input v-model="addInfo.math" id="addInp4" type="number"/>
              <br />
              <br />
            </span>
            <span>
              Python:
              <input v-model="addInfo.Python" id="addInp5" type="number"/>
              <br />
              <br />
            </span>
            <span>
              Web:
              <input v-model="addInfo.Web" id="addInp6" type="number"/>
              <br />
              <br />
            </span>
            <span>
              Java:
              <input v-model="addInfo.Java" id="addInp7" type="number"/>
              <br />
              <br />
            </span>
            <span>
              dataVisual:
              <input v-model="addInfo.dataVisual" id="addInp8" type="number"/>
              <br />
              <br />
            </span>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button @click="add">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div style="margin-top:10px">
        <table style="width:100%;border-collapse:collapse;text-algin:center;" border="1px">
          <tr>
            <th>学号</th>
            <th>班级</th>
            <th>姓名</th>
            <th>身份</th>
            <th>math</th>
            <th>Python</th>
            <th>Web</th>
            <th>Java</th>
            <th>dataVisual</th>
            <th>操作</th>
          </tr>
          <tr v-for="(item,index) in studentAllGrade1" :key="index">
            <th>{{item.code}}</th>
            <th>{{item.grade}}</th>
            <th>{{item.name}}</th>
            <th>{{item.identity}}</th>
            <th :class="{ 'low-score': item.math < 60 }">{{item.math}}</th>
            <th :class="{ 'low-score': item.Python < 60 }">{{item.Python}}</th>
            <th :class="{ 'low-score': item.Web < 60 }">{{item.Web}}</th>
            <th :class="{ 'low-score': item.Java < 60 }">{{item.Java}}</th>
            <th :class="{ 'low-score': item.dataVisual < 60 }">{{item.dataVisual}}</th>
            <th>
              <el-button
                type="text"
                @click="updataItem(item)"
                style="color:black;border:1px solid black;width:30%;background:skyblue;font-size:15px"
              >修改</el-button>
              <el-dialog
                title="所有项都为必填项"
                :visible.sync="centerDialogVisible1"
                width="40%"
                center
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
              >
                <span style="margin-left:150px;display:flex;flex-direction:column;">
                  <span>
                    math:(修改前:{{updataGradeItemInfo.math}})
                    <input
                      v-model="upDateGradeInfo.math"
                      type="number"
                      id="inp1"
                    />
                    <br />
                    <br />
                  </span>
                  <span>
                    Python:(修改前:{{updataGradeItemInfo.Python}})
                    <input
                      v-model="upDateGradeInfo.Python"
                      id="inp2"
                      type="number"
                    />
                    <br />
                    <br />
                  </span>
                  <span>
                    Web:(修改前:{{updataGradeItemInfo.Web}})
                    <input
                      v-model="upDateGradeInfo.Web"
                      id="inp3"
                      type="number"
                    />
                    <br />
                    <br />
                  </span>
                  <span>
                    Java:(修改前:{{updataGradeItemInfo.Java}})
                    <input
                      v-model="upDateGradeInfo.Java"
                      id="inp4"
                      type="number"
                    />
                    <br />
                    <br />
                  </span>
                  <span>
                    dataVisual:(修改前:{{updataGradeItemInfo.dataVisual}})
                    <input
                      v-model="upDateGradeInfo.dataVisual"
                      id="inp5"
                      type="number"
                    />
                  </span>
                </span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="centerDialogVisible1 = false">取 消</el-button>
                  <el-button @click="update">确 定</el-button>
                </span>
              </el-dialog>
              <label>--</label>
              <el-button
                type="text"
                @click="deleteItem(item)"
                style="color:black;border:1px solid black;width:30%;background:red;font-size:15px"
              >删除</el-button>
              <el-dialog title="提示" :visible.sync="centerDialogVisible2" width="40%" center>
                <div>
                  确认删除的学号:
                  <input v-model="deleteInfo.code" type="number" id="dinp1" />
                </div>
                <div slot="footer">
                  <el-button @click="centerDialogVisible2 = false">取 消</el-button>
                  <el-button @click="deleteStudentInfo">确 定</el-button>
                </div>
              </el-dialog>
            </th>
          </tr>
        </table>
      </div>
    </div>
    <div class="block" style="float:right;margin:20px">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
        :current-page.sync="pagination.page_index"
        :page-sizes="pagination.page_sizes"
        :page-size="pagination.page_size"
        :layout="pagination.layout"
        :total="pagination.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "queryGradeAll",
  data() {
    return {
       pagination: {
        page_size: null,
        page_index: null,
        total:null,
        page_sizes:[5,10,20],
        layout:"total, sizes, prev, pager, next, jumper"
      },
      params: {
        queryParams: ""
      },
      loading: false,
      centerDialogVisible: false,
      centerDialogVisible1: false,
      centerDialogVisible2: false,
      studentAllGrade: [],
      studentAllGrade1: [],
      updataGradeItemInfo: {},
      upDateGradeInfo: {
        math: "",
        Python: "",
        Web: "",
        Java: "",
        dataVisual: "",
        code: ""
      },
      deleteItemInfo: {
        code: ""
      },
      deleteInfo: {
        code: ""
      },
      addInfo: {
        code: "",
        grade: "",
        name: "",
        math: "",
        Python: "",
        Web: "",
        Java: "",
        dataVisual: "",
        identity: ""
      }
    };
  },
  mounted() {
    this.getStudentAllGrade();
  },
  methods: {
    async getStudentAllGrade() {
      await this.$API
        .call("/getStudentAllGradde", "get", this.params, "")
        .then(res => {
          this.studentAllGrade = res.data
          this.pagination.total = this.studentAllGrade.length;
          this.pagination.page_index = 1;
          this.pagination.page_size = 5;
          this.studentAllGrade1 = this.studentAllGrade.filter(
            (item, index) => {
              return index < this.pagination.page_size;
            }
          );
          })
        .catch(error => console.log("获取失败", error));
    },
     handleSizeChange(page_size){
      this.pagination.page_index = 1;
      this.pagination.page_size = page_size;
      this.studentAllGrade1 = this.studentAllGrade.filter((item,index)=>{
        return index < this.pagination.page_size
      }) 
    },
    handleCurrentChange(page){
      //获取去往页数的第一条数据
      let index = this.pagination.page_size * (page-1);
      let nums = this.pagination.page_size * page;
      let tableData = [];
      for (let i = index; i < nums; i++) {
        if(this.studentAllGrade[i]){
          tableData.push(this.studentAllGrade[i])
          this.studentAllGrade1 = tableData
        }
      }
    },
    updataItem(item) {
      this.updataGradeItemInfo = {
        math: item.math,
        Python: item.Python,
        Web: item.Web,
        Java: item.Java,
        dataVisual: item.dataVisual
      };
      this.upDateGradeInfo.code = item.code;
      this.centerDialogVisible1 = true;
    },
    async update() {
      this.loading = true;
      const inp1 = document.getElementById("inp1");
      const inp2 = document.getElementById("inp2");
      const inp3 = document.getElementById("inp3");
      const inp4 = document.getElementById("inp4");
      const inp5 = document.getElementById("inp5");
      if (
        inp2.value &&
        inp3.value &&
        inp4.value &&
        inp5.value &&
        inp1.value != ""
      ) {
        await this.$API
          .call("/upDataStudentGrade", "post", "", this.upDateGradeInfo)
          .then(res => {
            if (res.data === "更新学生成绩失败") {
              alert("更新学生成绩失败"),
                (inp1.value = ""),
                (inp2.value = ""),
                (inp3.value = ""),
                (inp4.value = ""),
                (inp5.value = "");
              this.loading = false;
            } else {
              alert("更新学生成绩成功"), (this.loading = false);
              window.location.reload(true);
            }
          })
          .catch(() => alert("修改失败,请联系管理员"));
      } else {
        alert("必填字段不能为空!");
        this.loading = false;
      }
    },
    deleteItem(item) {
      this.deleteItemInfo = {
        code: item.code
      };
      this.centerDialogVisible2 = true;
    },
    async deleteStudentInfo() {
      const dinp1 = document.getElementById("dinp1");
      if (dinp1.value == "") {
        alert("删除学号不能为空");
      } else if (dinp1.value != this.deleteItemInfo.code) {
        alert("删除学号不一致");
      } else {
        await this.$API
          .call("/deleteStudentInfo", "post", "", this.deleteInfo)
          .then(res => {
            if (res.data == "删除成功") {
              alert(res.data);
              window.location.reload();
            } else {
              alert(res.data);
              dinp1.value = "";
            }
          });
      }
    },
    async add() {
      const addInp1 = document.getElementById("addInp1");
      const addInp2 = document.getElementById("addInp2");
      const addInp3 = document.getElementById("addInp3");
      const addInp4 = document.getElementById("addInp4");
      const addInp5 = document.getElementById("addInp5");
      const addInp6 = document.getElementById("addInp6");
      const addInp7 = document.getElementById("addInp7");
      const addInp8 = document.getElementById("addInp8");
      // const addInp9 = document.getElementById("addInp9");
      if (
        addInp1.value &&
        addInp2.value &&
        addInp3.value &&
        addInp4.value &&
        addInp5.value &&
        addInp6.value &&
        addInp7.value &&
        this.addInfo.identity&&
        addInp8.value != ""
      ) {
        await this.$API
          .call("/addStudentGrade", "post", "", this.addInfo)
          .then(res => {
            if (res.data.msg == "添加失败") {
              alert(res.data.msg);
              (addInp1.value = ""),
                (addInp2.value = ""),
                (addInp3.value = ""),
                (addInp4.value = ""),
                (addInp5.value = ""),
                (addInp6.value = ""),
                (addInp7.value = ""),
                (addInp8.value = "");
              this.addInfo.identity = "";
            } else if (res.data.msg == "添加成功") {
              alert(res.data.msg), window.location.reload();
            }
          })
          .catch(() => {
            alert("该学号已存在"), (addInp1.value = "");
          });
      } else {
        alert("必填字段不能为空");
      }
    }
  }
};
</script>>
  
<style lang='less' scoped>
.low-score {
  color: red; /* 将分数小于60的文字颜色设置为红色 */
}
</style>